<template>
    <div style="background: white">
        <Row>
            <Col class="card-min offset">
            <span class="card-title">存档空间</span>
            <div @mouseover="mouseover" @mouseout="mouseout" class="action">
                <Icon type="more" size="24" color="#D3D3D3" class="card-action" v-if="!oHover"></Icon>
                <span class="card-action-hover" v-if="oHover">扩充</span>
            </div>
            <p class="card-val">0/200份</p>
            </Col>
        </Row>
        <Row type="flex" justify="start" class="action_row">
            <Col class="search">
                <Input v-model="search" placeholder="员工姓名/手机号搜索" size="large">
                    <Icon style="width: 24px;" type="ios-search" slot="prepend" size="16"></Icon>
                    <Button slot="append">搜索</Button>
                </Input>
            </Col>
            <Col class="work_status">
                <Select v-model="model1" size="large">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>
            <Col class="work_status">
                <Select v-model="model1" size="large">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>
            <div class="inn-btn cursor"></div>
            <div class="inn-btn-2 cursor"></div>
            <div class="inn-btn-1 cursor"></div>
        </Row>
        <!--列表噻-->
        <Table :columns="columns7" :data="data6" class="oTable"></Table>
        <Page class="page_row" :total="100" :current="page" show-sizer show-elevator show-total @on-change="goPage" @on-page-size-change="changeSize"></Page>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                page:1,
                search:'',
                oHover:false,
                cityList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    }
                ],
                model1: '',
                columns7: [
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'name',
                        render: (h, params) => {
                        return h('div', [
                            h('Icon', {
                                props: {
                                    type: 'person'
                                }
                            }),
                            h('strong', params.row.name)
                        ])
                    }
        },
            {
                title: '手机号',
                align: 'center',
                key: 'age'
            },
            {
                title: '职位',
                key: 'address',
                align: 'center'
            },
            {
                title: '在职时间',
                key: 'entryTime',
                align: 'center'
            },
            {
                title: '在职状态',
                key: 'workstatus',
                align: 'center'
            },
            {
                title: '背调状态',
                key: 'reportstatus',
                align: 'center'
            },
            {
                title: '操作',
                key: 'action',
                width: 200,
                align: 'center',
                render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'ghost',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                            this.show(params.index)
                    }
            }
            }, '查看详情'),
                h('Button', {
                    props: {
                        type: 'ghost',
                        size: 'small'
                    },
                    on: {
                        click: () => {
                        this.remove(params.index)
                }
            }
            }, '评价'+params.index)
            ])
            }
            }
        ],
            data6: [
                {
                    name: '钱天雄',
                    age: 15577890987,
                    address: '产品经理',
                    entryTime:'2017-05-27 至 2018-05-26',
                    workstatus:'归档',
                    reportstatus:'未背调'
                },
                {
                    name: '钱天雄',
                    age: 15577890987,
                    address: '产品经理',
                    entryTime:'2017-05-27 至 2018-05-26',
                    workstatus:'归档',
                    reportstatus:'未背调'
                },{
                    name: '钱天雄',
                    age: 15577890987,
                    address: '产品经理',
                    entryTime:'2017-05-27 至 2018-05-26',
                    workstatus:'归档',
                    reportstatus:'未背调'
                },{
                    name: '钱天雄',
                    age: 15577890987,
                    address: '产品经理',
                    entryTime:'2017-05-27 至 2018-05-26',
                    workstatus:'归档',
                    reportstatus:'未背调'
                },{
                    name: '钱天雄',
                    age: 15577890987,
                    address: '产品经理',
                    entryTime:'2017-05-27 至 2018-05-26',
                    workstatus:'归档',
                    reportstatus:'未背调'
                },

            ]
            }
        },
        methods:{
            mouseover(){
                this.oHover = true;
            },
            mouseout(){
                this.oHover = false;
            },
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            },
            goPage(page){
                console.log(page);
            },
            changeSize(size){
                console.log(size);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .card-min{
        width: 260px;
        height:100px;
        padding: 25px;
        background: #FFFFFF;
        box-shadow: 0 3px 10px 2px rgba(162,181,199,0.15);
        border-radius: 2px;
        margin-top: 15px;
    }
    .card-min:hover{
        cursor:pointer;
        background: #FFFFFF;
        box-shadow: 0 5px 16px 9px rgba(162,181,199,0.30);
        border-radius: 4px;
    }
    .card-min .card-title{
        font-size: 14px;
        color: #323C47;
        letter-spacing: 0;
        line-height: 14px;
        padding: 1px 5px 1px 5px;
    }
    .card-min .action{
        float: right;
        width:20%;
        height:20px;
    }
    .card-min .card-action{
        float: right;
        margin-top: -2px;
        margin-right:10px;
    }
    .card-min .card-action-hover{
        float: right;
        background: #FF8448;
        border-radius: 55px;
        font-size: 12px;
        color: #FFFFFF;
        padding: 0px 5px 1px 5px;
        margin-top: -2px;
    }
    .card-min .card-action-hover:hover{
        cursor:pointer;
    }
    .card-min .card-val{
        height:20px;
        font-size: 20px;
        color: #0093FF;
        line-height: 20px;
        margin-top: 15px;
    }
    .action_row{
        position: relative;
        margin-top: 45px;
    }
    .search{
        width: 300px;
    }
    .work_status{
        width:120px;
        margin-left: 10px;
    }
    .cursor:hover{
        cursor:pointer;
    }
    .inn-btn{
        position: absolute;
        right: 0;
        top:0;
        width: 122px;
        height: 52px;
        background-image: url("../../assets/img/secret/secret-0.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .inn-btn:hover{
        background-image: url("../../assets/img/secret/secret-1.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .inn-btn-1{
        width: 122px;
        height: 52px;
        position: absolute;
        right: 122px;
        top:0;
        background-image: url("../../assets/img/work-space/inn-btn-1.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .inn-btn-1:hover{
        background-image: url("../../assets/img/work-space/inn-btn-2.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .inn-btn-2{
        position: absolute;
        right: 244px;
        top:-2px;
        width: 122px;
        height: 52px;
        background-image: url("../../assets/img/work-space/inn-btn-3.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .inn-btn-2:hover{
        background-image: url("../../assets/img/work-space/inn-btn-4.png");
        background-repeat: no-repeat;
        background-position: 10px -4px;
    }
    .oTable{
        margin-top: 30px;
    }
    .page_row{
        margin-top: 24px;
    }
</style>
